<template>
    <div id="header">
        <el-row>
            <el-col :span="6"
                ><div class="system-functions">
                    <system-functions></system-functions></div
            ></el-col>
            <el-col :span="12"
                ><div class="system-name"><h1>智能监控系统</h1></div></el-col
            >
            <el-col :span="6">
                <el-row class="system-user">
                    <div class="system-user-btn" v-if="user == null">
                        <el-link
                            type="info"
                            :underline="false"
                            target="_blank"
                            @click="login"
                            >登录</el-link
                        >
                        &nbsp;/&nbsp;
                        <el-link
                            type="info"
                            :underline="false"
                            target="_blank"
                            @click="register"
                            >注册</el-link
                        >
                    </div>
                    <div v-if="user != null">
                        <el-link
                            type="info"
                            :underline="false"
                            target="_blank"
                            >{{user.username}}</el-link
                        >
                        &nbsp;/&nbsp;
                        <el-link
                            type="info"
                            :underline="false"
                            target="_blank"
                            @click="logout"
                            >登出</el-link
                        >
                    </div>
                </el-row>
                <el-row class="system-time">{{ date | timeFormat }}</el-row>
            </el-col>
        </el-row>
        <user ref="userOpt" v-show="visible" :visible.sync="visible" @setUser="setUser"></user>
    </div>
</template>

<script>
import SystemFunctions from "./SystemFunctions";
import User from "./User"

export default {
    components: {
        SystemFunctions, User
    },
    data() {
        return {
            date: new Date(),
            visible: false,
            user: null,
        };
    },
    methods: {
        login() {
            this.$refs.userOpt.setEventType("login");
            this.visible = true;
        },
        register() {
            this.$refs.userOpt.setEventType("register");
            this.visible = true;
        },
        setUser(user) {
            let userInfo = JSON.stringify(user);
            sessionStorage.setItem("user", userInfo);
            this.user = user;
            console.log(this.user);
        },
        logout() {
            this.$axios.get("/api/frp/logout");
            this.$axios.get("/api/remote/user/logout");
            sessionStorage.clear();
            this.user = null;
        }
    },
    mounted() {
        let user = sessionStorage.getItem("user");
        if (user) {
            this.user = JSON.parse(user);
        }

        let that = this;
        this.timer = setInterval(function () {
            that.date = new Date();
        });
    },
    beforeDestroy: function () {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    filters: {
        timeFormat: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日 " + h + ":" + m + ":" + s;
        },
    },
};
</script>

<style scoped>
#header {
    white-space: nowrap;
}
.system-name h1 {
    margin: 0;
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
    color: white;
    letter-spacing: 1em;
    text-indent: 1em;
}
.system-functions {
    text-align: left;
    padding-top: 10px;
}
.system-user {
    height: 30px;
    line-height: 30px;
    text-align: right;
    padding-top: 10px;
    color: #909399;
}
.system-time {
    height: 30px;
    line-height: 30px;
    text-align: right;
    padding-top: 10px;
    color: #909399;
}
</style>